<template>
  <div class="my-registration-page">
    <!-- 新增报名按钮（带下拉选择） -->
    <el-dropdown class="add-registration-btn" trigger="click">
      <el-button type="primary">
        新增报名
        <i class="el-icon-arrow-down el-icon--right"></i>
      </el-button>
      <el-dropdown-menu slot="dropdown">
        <el-dropdown-item @click.native="personalDialogVisible = true">
          个人报名
        </el-dropdown-item>
        <el-dropdown-item @click.native="groupDialogVisible = true">
          集体报名
        </el-dropdown-item>
      </el-dropdown-menu>
    </el-dropdown>

    <!-- 标签页导航 -->
    <el-tabs v-model="activeTab" class="custom-tabs">
      <el-tab-pane label="所有报名" name="all"></el-tab-pane>
      <el-tab-pane label="已办结" name="completed"></el-tab-pane>
      <el-tab-pane label="待完成" name="pending"></el-tab-pane>
      <el-tab-pane label="待受理" name="toAccept"></el-tab-pane>
      <el-tab-pane label="已作废" name="cancelled"></el-tab-pane>

      <!-- 内容区域 -->
      <div class="registration-list">
        <el-card
          v-for="item in filteredRegistrations"
          :key="item.id"
          class="registration-card"
        >
          <!-- 选择框与删除按钮 -->
          <div class="card-header">
            <el-checkbox v-model="item.checked"></el-checkbox>
            <el-button type="text" class="delete-btn" @click="handleDelete(item.id)">取消报名</el-button>
          </div>

          <!-- 报名信息区 -->
          <div class="info-section">
            <div class="info-column">
              <div class="info-item">
                <span class="label">姓名：</span>
                <span class="value">{{ item.name }}</span>
              </div>
              <div class="info-item">
                <span class="label">身份证号：</span>
                <span class="value">{{ item.idCard }}</span>
              </div>
              <div class="info-item">
                <span class="label">联系方式：</span>
                <span class="value">{{ item.phone }}</span>
              </div>
              <div class="info-item">
                <span class="label">单位：</span>
                <span class="value">{{ item.company }}</span>
              </div>
              <div class="info-item">
                <span class="label">报名时间：</span>
                <span class="value">{{ item.registrationTime }}</span>
              </div>
            </div>
            <div class="info-column">
              <div class="info-item">
                <span class="label">报名类别：</span>
                <span class="value">{{ item.category }}</span>
              </div>
              <div class="info-item">
                <span class="label">报名项目：</span>
                <span class="value">{{ item.project }}</span>
              </div>
              <div class="info-item">
                <span class="label">培训班：</span>
                <span class="value">{{ item.trainingClass }}</span>
              </div>
              <div class="info-item">
                <span class="label">培训类别：</span>
                <span class="value">{{ item.trainingCategory }}</span>
              </div>
              <div class="info-item">
                <span class="label">费用：</span>
                <span class="value">{{ item.fee }}</span>
              </div>
            </div>
          </div>

          <!-- 流程步骤区 -->
          <div class="process-section">
            <div class="step-list">
              <div class="step-item" :class="getStepClass(item.steps[0])">
                <div class="step-circle">{{ item.steps[0].index }}</div>
                <div class="step-text">{{ item.steps[0].name }}</div>
                <div class="step-tip">{{ item.steps[0].tip }}</div>
                <div class="step-btns">
                  <el-button v-if="item.steps[0].btns.modify" type="primary" size="mini" @click="handleModify(item.id, 1)">修改</el-button>
                  <el-button v-if="item.steps[0].btns.view" type="primary" size="mini" @click="handleView(item.id, 1)">查看</el-button>
                  <el-button v-if="item.steps[0].btns.print" type="primary" size="mini" @click="handlePrint(item.id, 1)">打印申请表</el-button>
                  <!-- 新增备注按钮 -->
                  <el-button v-if="item.steps[0].btns.remark" type="primary" size="mini" @click="openRemarkDialog(item.id)">备注</el-button>
                </div>
              </div>
              <div class="step-item" :class="getStepClass(item.steps[1])">
                <div class="step-circle">{{ item.steps[1].index }}</div>
                <div class="step-text">{{ item.steps[1].name }}</div>
                <div class="step-tip">{{ item.steps[1].tip }}</div>
                <div class="step-btns">
                  <el-button v-if="item.steps[1].btns.pay" type="primary" size="mini" @click="openPaymentDialog(item.id)">去缴费</el-button>
                  <el-button v-if="item.steps[1].btns.refund" type="primary" size="mini" @click="handleRefund(item.id, 2)">申请退款</el-button>
                  <el-button v-if="item.steps[1].btns.uploadVoucher" type="primary" size="mini" @click="handleUploadVoucher(item.id, 2)">上传缴费凭证</el-button>
                </div>
              </div>
              <div class="step-item" :class="getStepClass(item.steps[2])">
                <div class="step-circle">{{ item.steps[2].index }}</div>
                <div class="step-text">{{ item.steps[2].name }}</div>
                <div class="step-tip">{{ item.steps[2].tip }}</div>
                <div class="step-btns">
                  <el-button v-if="item.steps[2].btns.upload" type="primary" size="mini" @click="handleUpload(item.id, 3)">去上传</el-button>
                  <el-button v-if="item.steps[2].btns.modify" type="primary" size="mini" @click="handleModify(item.id, 3)">修改</el-button>
                  <el-button v-if="item.steps[2].btns.view" type="primary" size="mini" @click="handleView(item.id, 3)">查看</el-button>
                </div>
              </div>
              <div class="step-item" :class="getStepClass(item.steps[3])">
                <div class="step-circle">{{ item.steps[3].index }}</div>
                <div class="step-text">{{ item.steps[3].name }}</div>
                <div class="step-tip">{{ item.steps[3].tip }}</div>
              </div>
              <div class="step-item" :class="getStepClass(item.steps[4])">
                <div class="step-circle">{{ item.steps[4].index }}</div>
                <div class="step-text">{{ item.steps[4].name }}</div>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 空状态提示 -->
        <div v-if="filteredRegistrations.length === 0" class="empty-state">
          <el-empty description="暂无报名数据"></el-empty>
        </div>
      </div>
    </el-tabs>

    <!-- 批量操作栏 -->
    <div class="batch-actions">
      <el-button type="primary" size="mini">打印申请表</el-button>
      <el-button type="danger" size="mini" @click="handleBatchCancel">取消报名</el-button>
    </div>

    <!-- 个人报名弹窗 -->
    <PersonalDialog
      :visible.sync="personalDialogVisible"
      :project-id="selectedProjectId"
      @success="handleDialogSuccess('个人报名')"
    />

    <!-- 集体报名弹窗 -->
    <GroupDialog
      :visible.sync="groupDialogVisible"
      @success="handleDialogSuccess('集体报名')"
    />


    <!-- 缴费弹窗（示例） -->
    <el-dialog
      title="缴费确认"
      :visible.sync="paymentDialogVisible"
      width="50%"
    >
      <el-form :model="paymentForm" label-width="120px">
        <el-form-item label="报名ID">
          <el-input v-model="paymentForm.registrationId" disabled />
        </el-form-item>
        <el-form-item label="缴费金额">
          <el-input v-model="paymentForm.amount" disabled suffix="元" />
        </el-form-item>
        <el-form-item label="缴费方式">
          <el-radio-group v-model="paymentForm.method">
            <el-radio label="online">在线支付</el-radio>
            <el-radio label="offline">线下汇款</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="paymentDialogVisible = false">取消</el-button>
        <el-button type="primary" @click="submitPayment">确认缴费</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 引入弹窗组件
import PersonalDialog from '@/components/portal/registration/personalDialog.vue';
import GroupDialog from '@/components/portal/registration/groupDialog.vue';
import RemarkDialog from '@/components/portal/registration/remarkDialog.vue';

export default {
  name: 'MyRegistrationPage',
  components: {
    PersonalDialog,
    GroupDialog,
    RemarkDialog
  },
  data() {
    return {
      activeTab: 'all',
      // 弹窗控制变量
      personalDialogVisible: false,
      groupDialogVisible: false,
      remarkDialogVisible: false,
      paymentDialogVisible: false,
      currentRegistrationId: null,
      selectedProjectId: null,
      // 缴费表单数据
      paymentForm: {
        registrationId: '',
        amount: '',
        method: 'online'
      },
      // 原有报名数据
      registrations: [
        {
          id: 1,
          checked: true,
          name: '张三',
          idCard: '123456789123456789',
          phone: '12345678910',
          company: 'XXXX公司',
          registrationTime: '2025-09-09 09:09:09',
          category: '新训/复训换证',
          project: 'XXX/XXX',
          trainingClass: 'XXX',
          trainingCategory: 'XXX',
          fee: '500元',
          steps: [
            {
              index: 1,
              name: '提交报名信息',
              tip: '#需修改#',
              status: 'needModify',
              btns: { modify: true, view: true, print: true, remark: true }
            },
            {
              index: 2,
              name: '缴费',
              tip: '#待缴费#<br>#待确认#',
              status: 'pendingPay',
              btns: { pay: true, refund: true, uploadVoucher: false }
            },
            {
              index: 3,
              name: '上传资料',
              tip: '#待上传#<br>#需修改#',
              status: 'pendingUpload',
              btns: { upload: true, modify: true, view: true }
            },
            {
              index: 4,
              name: '受理',
              tip: '#待受理#<br>#已受理#',
              status: 'pendingAccept',
              btns: {}
            },
            {
              index: 5,
              name: '报名办结',
              tip: '',
              status: 'completed',
              btns: {}
            }
          ]
        },
        {
          id: 2,
          checked: true,
          name: '李四',
          idCard: '987654321987654321',
          phone: '19876543210',
          company: 'YYYY企业',
          registrationTime: '2025-09-10 10:10:10',
          category: '新训',
          project: 'YYY/YYY',
          trainingClass: 'YYY',
          trainingCategory: 'YYY',
          fee: '800元',
          steps: [
            {
              index: 1,
              name: '提交报名信息',
              tip: '',
              status: 'completed',
              btns: { modify: true, view: true, print: true, remark: true }
            },
            {
              index: 2,
              name: '缴费',
              tip: '#待缴费#<br>#待确认#',
              status: 'pendingPay',
              btns: { pay: true, refund: false, uploadVoucher: true }
            },
            {
              index: 3,
              name: '上传资料',
              tip: '',
              status: 'completed',
              btns: {}
            },
            {
              index: 4,
              name: '受理',
              tip: '',
              status: 'completed',
              btns: {}
            },
            {
              index: 5,
              name: '报名办结',
              tip: '',
              status: 'pending',
              btns: {}
            }
          ]
        },
        {
          id: 3,
          checked: false,
          name: '王五',
          idCard: '112233445566778899',
          phone: '11223344556',
          company: 'ZZZ单位',
          registrationTime: '2025-09-11 11:11:11',
          category: '复训换证',
          project: 'ZZZ/ZZZ',
          trainingClass: 'ZZZ',
          trainingCategory: 'ZZZ',
          fee: '300元',
          steps: [
            {
              index: 1,
              name: '提交报名信息',
              tip: '',
              status: 'completed',
              btns: { modify: true, view: true, print: true, remark: true }
            },
            {
              index: 2,
              name: '缴费',
              tip: '',
              status: 'completed',
              btns: { refund: true }
            },
            {
              index: 3,
              name: '上传资料',
              tip: '',
              status: 'pending',
              btns: { upload: true }
            },
            {
              index: 4,
              name: '受理',
              tip: '',
              status: 'pending',
              btns: {}
            },
            {
              index: 5,
              name: '报名办结',
              tip: '',
              status: 'pending',
              btns: {}
            }
          ]
        }
      ]
    };
  },
  computed: {
    filteredRegistrations() {
      // 根据标签页筛选数据（实际业务逻辑）
      switch (this.activeTab) {
        case 'completed':
          return this.registrations.filter(item =>
            item.steps[4].status === 'completed'
          );
        case 'pending':
          return this.registrations.filter(item =>
            item.steps.some(step => step.status.includes('pending')) &&
            item.steps[4].status !== 'completed'
          );
        case 'toAccept':
          return this.registrations.filter(item =>
            item.steps[3].status === 'pendingAccept'
          );
        case 'cancelled':
          return this.registrations.filter(item =>
            item.steps.some(step => step.status === 'disabled')
          );
        default:
          return this.registrations;
      }
    }
  },
  created(){
    this.getList();
  },
  methods: {
    async getList(){
    
    },
    // 步骤样式类名
    getStepClass(step) {
      const statusMap = {
        completed: 'step-completed',
        pendingPay: 'step-pending',
        pendingUpload: 'step-pending',
        pendingAccept: 'step-pending',
        needModify: 'step-need-modify',
        accepted: 'step-completed',
        disabled: 'step-disabled',
        pending: 'step-pending'
      };
      return statusMap[step.status] || '';
    },

    // 打开备注弹窗
    openRemarkDialog(registrationId) {
      this.currentRegistrationId = registrationId;
      this.remarkDialogVisible = true;
    },

    // 打开缴费弹窗
    openPaymentDialog(registrationId) {
      const target = this.registrations.find(item => item.id === registrationId);
      if (target) {
        this.paymentForm = {
          registrationId: registrationId,
          amount: target.fee.replace('元', ''),
          method: 'online'
        };
      }
      this.paymentDialogVisible = true;
    },

    // 提交缴费
    submitPayment() {
      // 模拟缴费接口调用
      setTimeout(() => {
        this.$message.success('缴费成功');
        this.paymentDialogVisible = false;
        // 更新对应报名项的缴费状态
        const target = this.registrations.find(
          item => item.id === this.paymentForm.registrationId
        );
        if (target) {
          target.steps[1].status = 'completed';
          target.steps[1].tip = '';
          target.steps[1].btns = { refund: true };
        }
      }, 800);
    },

    // 弹窗操作成功回调
    handleDialogSuccess(type) {
      this.$message.success(`${type}操作成功`);
      // 模拟刷新数据（实际项目中调用接口）
      setTimeout(() => {
        // 新增一条模拟数据
        const newId = Math.max(...this.registrations.map(item => item.id)) + 1;
        this.registrations.unshift({
          id: newId,
          checked: false,
          name: type === '个人报名' ? '新增个人' : '新增集体成员',
          idCard: '111222333444555666',
          phone: '13800138000',
          company: '新报名单位',
          registrationTime: new Date().toLocaleString().replace(/\//g, '-'),
          category: '新训',
          project: '新增项目',
          trainingClass: '新增班级',
          trainingCategory: '新增类别',
          fee: '600元',
          steps: [
            {
              index: 1,
              name: '提交报名信息',
              tip: '',
              status: 'completed',
              btns: { modify: true, view: true, print: true, remark: true }
            },
            {
              index: 2,
              name: '缴费',
              tip: '#待缴费#',
              status: 'pendingPay',
              btns: { pay: true, refund: false, uploadVoucher: false }
            },
            {
              index: 3,
              name: '上传资料',
              tip: '#待上传#',
              status: 'pendingUpload',
              btns: { upload: true }
            },
            {
              index: 4,
              name: '受理',
              tip: '',
              status: 'pending',
              btns: {}
            },
            {
              index: 5,
              name: '报名办结',
              tip: '',
              status: 'pending',
              btns: {}
            }
          ]
        });
      }, 500);
    },

    // 备注提交成功
    handleRemarkSuccess() {
      this.$message.success('备注已保存');
      this.remarkDialogVisible = false;
    },

    // 批量取消报名
    handleBatchCancel() {
      const checkedItems = this.registrations.filter(item => item.checked);
      if (checkedItems.length === 0) {
        this.$message.warning('请先选择要取消的报名');
        return;
      }

      this.$confirm(`确定取消选中的${checkedItems.length}条报名吗？`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        checkedItems.forEach(item => {
          this.handleDelete(item.id);
        });
        this.$message.success('取消成功');
      });
    },

    // 原有方法
    handleDelete(id) {
      this.registrations = this.registrations.filter(item => item.id !== id);
    },
    handleModify(id, stepIndex) {
      console.log('修改步骤', id, '步骤', stepIndex);
      this.$message.info('修改功能待实现');
    },
    handleView(id, stepIndex) {
      console.log('查看步骤', id, '步骤', stepIndex);
      this.$message.info('查看功能待实现');
    },
    handlePrint(id, stepIndex) {
      console.log('打印申请表', id, '步骤', stepIndex);
      this.$message.info('打印功能待实现');
    },
    handleRefund(id, stepIndex) {
      console.log('申请退款', id, '步骤', stepIndex);
      this.$message.info('退款功能待实现');
    },
    handleUploadVoucher(id, stepIndex) {
      console.log('上传缴费凭证', id, '步骤', stepIndex);
      this.$message.info('上传凭证功能待实现');
    },
    handleUpload(id, stepIndex) {
      console.log('去上传资料', id, '步骤', stepIndex);
      this.$message.info('上传资料功能待实现');
    }
  }
};
</script>

<style scoped>
/* 原有样式保持不变 */
.my-registration-page {
  padding: 24px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 64px);
}

.add-registration-btn {
  margin-bottom: 16px;
  float: right;
}

.custom-tabs {
  background-color: #fff;
  border-radius: 4px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  clear: both;
}

::v-deep .el-tabs__header {
  margin-bottom: 20px;
}

::v-deep .el-tabs__item {
  font-size: 14px;
  color: #6b7280;
  padding: 0 16px;
}

::v-deep .el-tabs__item.is-active {
  color: #165dff;
  font-weight: 500;
}

::v-deep .el-tabs__active-bar {
  background-color: #165dff;
  height: 2px;
}

.registration-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.registration-card {
  border: none;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  transition: all 0.3s ease;
  overflow: hidden;
}

.registration-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 20px;
  background-color: #f9fafb;
  border-bottom: 1px solid #f0f2f5;
}

.delete-btn {
  color: #6b7280;
}

.info-section {
  display: flex;
  padding: 16px 20px;
  border-bottom: 1px solid #f0f2f5;
}

.info-column {
  flex: 1;
}

.info-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.label {
  font-size: 14px;
  color: #6b7280;
  min-width: 80px;
  text-align: right;
  margin-right: 8px;
  white-space: nowrap;
}

.value {
  font-size: 14px;
  color: #1f2329;
  line-height: 1.5;
}

.process-section {
  padding: 16px 20px;
}

.step-list {
  display: flex;
  justify-content: space-between;
}

.step-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 20%;
  position: relative;
}

.step-item:not(:first-child)::before {
  content: '';
  position: absolute;
  left: -50%;
  top: 12px;
  width: 100%;
  height: 2px;
  background-color: #d9d9d9;
  z-index: 1;
}

.step-circle {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 500;
  position: relative;
  z-index: 2;
}

.step-completed .step-circle {
  background-color: #2f5496;
  color: #fff;
}

.step-completed::before {
  background-color: #2f5496 !important;
}

.step-pending .step-circle {
  background-color: #fff;
  border: 2px solid #2f5496;
  color: #2f5496;
}

.step-need-modify .step-circle {
  background-color: #f53f3f;
  color: #fff;
}

.step-need-modify::before {
  background-color: #f53f3f !important;
}

.step-disabled .step-circle {
  background-color: #bfbfbf;
  color: #fff;
}

.step-disabled::before {
  background-color: #bfbfbf !important;
}

.step-text {
  margin-top: 8px;
  font-size: 14px;
  color: #1f2329;
}

.step-tip {
  margin-top: 4px;
  font-size: 12px;
  color: #6b7280;
  text-align: center;
}

.step-btns {
  margin-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.step-btns .el-button {
  padding: 4px 8px;
  font-size: 12px;
}

.empty-state {
  padding: 48px 0;
  text-align: center;
}

.batch-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.batch-actions .el-button {
  padding: 4px 12px;
  font-size: 13px;
}

@media (max-width: 768px) {
  .info-section {
    flex-direction: column;
  }

  .step-list {
    flex-wrap: wrap;
  }

  .step-item {
    width: 50%;
    margin-bottom: 16px;
  }

  .step-item:not(:first-child)::before {
    display: none;
  }

  .step-item:nth-child(2n+1)::before {
    display: none;
  }

  .step-item:nth-child(n+3) {
    margin-top: 16px;
  }
}
</style>
